<script lang="ts" setup>
import { h, reactive, useTemplateRef } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import XyIcon from '@/components/XyIcon'

const searchMethod = async (searchData: SearchData, pageData: PageData) => {
  pageData.loading = true
  ElMessage.success(JSON.stringify(searchData))
  await new Promise(r => setTimeout(r, 500))
  pageData.loading = false
  pageData.total = 3
  pageData.tableData = tableData
}
const tableFilterRef = useTemplateRef('tableFilterRef')
const clearFilterName = () => {
  tableFilterRef.value?.tableRef?.filterClearCondition?.('name', 'sex123')
}
const clearFilterAll = () => {
  tableFilterRef.value?.tableRef?.filterClearCondition?.()
}
interface Student {
  id: number
  name: string
  age: number
  sex: string
  address: string
  banji: string
}
const tableData = reactive<Student[]>([
  {
    id: 1,
    name: '王五',
    age: 20,
    sex: '男',
    address: '北京市',
    banji: '1班'
  },
  {
    id: 2,
    name: '张三',
    age: 18,
    sex: '',
    address: '开鲁县',
    banji: '2班'
  },
  {
    id: 3,
    name: '李四',
    age: 19,
    sex: '男',
    address: '通辽市',
    banji: ''
  }
])
const tableConfigFilter = reactive<TableConfig<Student>>({
  columns: [
    {
      type: 'default',
      label: '姓名（单选）',
      prop: 'name',
      filterType: 'radio',
      filterData: [
        { label: '张三', value: '张三' },
        { label: '李四', value: '李四' },
        { label: '王五', value: '王五' }
      ]
    },
    {
      type: 'default',
      label: '年龄（多选）',
      prop: 'age',
      filterType: 'checkbox',
      filterData: [
        { label: '18', value: 18 },
        { label: '19', value: 19 },
        { label: '20', value: 20 }
      ],
      filterOper(value, row) {
        return row.age === value
      },
      filterIcon: () => h(XyIcon, { icon: 'tabler:filter-search' })
    },
    {
      type: 'default',
      label: '性别（下拉）',
      prop: 'sex',
      propAlias: 'sex123',
      filterType: 'select',
      filterData: [
        { label: '男', value: '男' },
        { label: '女', value: '女' }
      ],
      filterOper(value, row) {
        return row.sex === value
      },
      filterIcon: () => h(XyIcon, { icon: 'mdi:account-filter-outline' })
    },
    {
      type: 'default',
      label: '班级（输入框）',
      prop: 'banji',
      filterType: 'input',
      filterOper(value, row) {
        return row.banji?.includes(String(value))
      },
      filterIcon: () => h(XyIcon, { icon: 'mdi:account-filter-outline' })
    },
    {
      type: 'default',
      label: '地址（后端）',
      prop: 'address',
      propAlias: 'address123',
      filterType: 'checkbox.searchMethod',
      filterData: [
        { label: '北京市', value: '北京市' },
        { label: '通辽市', value: '通辽市' },
        { label: '开鲁县', value: '开鲁县' }
      ],
      filterIcon: () => h(XyIcon, { icon: 'mdi:account-filter-outline' })
    }
  ],
  emptySlot: () => '暂无数据',
  searchMethod() {}
})
</script>
<template>
  <ElButton @click="clearFilterName">清空姓名、性别筛选项</ElButton>
  <ElButton @click="clearFilterAll">清空全部筛选项</ElButton>
  <XyTable ref="tableFilterRef" :tableConfig="tableConfigFilter" :tableData="tableData" @search-method="searchMethod" />
</template>
